<template>
    <div class="makeScore">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed :title='curProInfo.projectName' left-arrow
            @click-left="$router.go(-1)" />
        <div class="makeInfo">
            <p class="scoreTit">
                选手号码:NO.{{ choseIndex + 1 }}
            </p>
            <div class="overScore">最终得分:<span class="score">{{ playScoreList[choseIndex]&&playScoreList[choseIndex].score }}</span></div>
            <p class="choseNum">请选择选手号码</p>
            <div class="choseTenNum">
                <div class="arrow"><van-icon name="arrow-left" @click="arrowLeft"/></div>
                <p>1号-10号</p>
                <div class="arrow"><van-icon name="arrow" @click="arrowRight"/></div>
            </div>
            <div class="numList" v-show="showBlock">
                <span @click="haveActive(index)" class="numItem numActive"
                    :class="{'isH':item.isH, 'choseActive': choseIndex == index ? true : false }" v-for="(item, index) in playScoreList.slice((curPage-1)*10,10)"
                    :key="index">{{ index + 1 }}</span>
            </div>
            <div class="playGrade">
                <div class="shouPlay" v-show="showBlock" @click="retract">
                    收起<van-icon name="arrow-up" />
                </div>
                <div class="shouPlay" v-show="!showBlock" @click="retract">
                    展开<van-icon name="arrow-down" />
                </div>
                <div class="shouTit">
                    请进行打分<span class="interf">打分区间(0-{{ maxScore }})</span>
                </div>
                <div class="playScoreBox">
                    <van-stepper :integer="maxScore == 10 ? false : true" min="0" :step="maxScore == 10 ? 0.1 : 1"
                        :max="maxScore" v-model="playScoreList[choseIndex].score" style="margin-bottom: .6rem;"
                        input-width="60%" button-size=".7rem" @change="changeScore" />
                    <van-slider min="0" :step="maxScore == 10 ? 0.1 : 1" :max="maxScore" style="width: 90%;margin: auto;"
                        v-model="playScoreList[choseIndex].score" active-color="#5b55ff">
                        <template #button>
                            <div class="custom-button">no</div>
                        </template>
                    </van-slider>
                </div>
                <div class="bottomBtn">
                    <van-button style="width:48%;height:6vh;border-radius:.15rem"
                        @click="toBoard()"
                        color="linear-gradient(to right, #b267f4, #6953f7)">分数列表</van-button>
                    <van-button style="width:48%;height:6vh;border-radius:.15rem"
                        color="linear-gradient(to right, #5c79f7, #5c74f4)" @click="nextPlayScore">下一位</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {numberList,judgeScoreProject,getScoreRecord, scoreNumUpdateSingnal} from '@/apis/score'
export default {
    data() {
        return {
            choseIndex: 0,
            curPage:1,
            playScoreList: [],
            showBlock: true,
            maxScore: 10,
            curProInfo:{},
            projectName:''
        }
    },
    methods: {
        // 左箭头
        arrowLeft(){
            if(this.curProInfo.projectStatus == 3) return this.$toast("当前项目已经结束了");
                 
            console.log(this.curProInfo.projectStatus)
            if(this.curPage*10<=this.playScoreList.length) return
            this.curPage-=1
            this.haveActive((this.curPage-1)*10)
        },
        // 右箭头
        arrowRight(){
            if(this.curProInfo.projectStatus == 3) return this.$toast("当前项目已经结束了");
            console.log(this.curPage*10>=this.playScoreList.length)
            if(this.curPage*10>=this.playScoreList.length) return
            this.curPage+=1
            this.haveActive((this.curPage-1)*10)
        },

        async getJudgeScoreProject() {
            let id = this.$route.query.id
            const res = await judgeScoreProject(id);
            this.curProInfo = res.result
            this.maxScore = res.result.scoreType===0?10:100
        }, 
        async getNumberList(){
            let id = this.$route.query.id
            const res = await numberList(id);
            this.playScoreList = []
            if(res.result.length==0){
                for(let i=1;i<=100;i++){
                    this.playScoreList.push({score: 0,number:i})
                }
            }else{
                res.result.map(item=>{
                    this.playScoreList.push({score: 0,number:item})
                })
            }
        },
        async getScoreRecord(){
            let id = this.$route.query.id
            const res = await getScoreRecord({scoreProjectId: id})
            if(res.result.length==0) return
            this.playScoreList=this.playScoreList.map(item=>{
                res.result.map(resItem=>{
                    if(item.number == resItem.number){
                        item = resItem
                        item.isH=true
                    }
                })
                return item
            })
        },
        async haveActive(num) {
            if(this.curProInfo.projectStatus == 2){
                this.$toast.fail("当前项目已经结束了");
                return 
            }
            let params = {
                scoreProjectId: Number(this.$route.query.id),
                number: this.playScoreList[num].number,
                score: this.playScoreList[num].number
            }
            const res = await scoreNumUpdateSingnal(params)
            if(res.code == 1) return this.$toast(res.message)
            this.choseIndex = num
        },
        retract() {
            this.showBlock = !this.showBlock
        },
        async nextPlayScore() {
            if(this.curProInfo.projectStatus == 2){
                this.$toast.fail("当前项目已经结束了");
                return 
            }
            let params = {
                scoreProjectId: this.$route.query.id,
                number: this.playScoreList[this.choseIndex].number,
                score: this.playScoreList[this.choseIndex].number
            }
            const res = await scoreNumUpdateSingnal(params)
            if(res.code == 1) return this.$toast(res.message)
            this.choseIndex++
        },
        changeScore() {
            if (Number(this.playScoreList[this.choseIndex].score) > Number(this.maxScore)) {
                this.playScoreList[this.choseIndex].score = this.maxScore
            }
        },

        toBoard() {
            let id = this.$route.query.id
            this.$router.push({
                path: '/scoring/scoreList',
                query: {
                    id
                }
            })
        },
    },
    async mounted() {
        await this.getJudgeScoreProject()
        await this.getNumberList()
        await this.getScoreRecord()
    }

}
</script>

<style lang="less" scoped>
::v-deep .van-stepper__input {
    margin: 0 .4rem;
    background: #212237;
    color: #fff;
}

::v-deep .van-stepper__minus,
::v-deep .van-stepper__plus {
    border-radius: .15rem;
    background: #212237;
    color: rgba(255, 255, 255, .8);
}

::v-deep .van-stepper__minus--disabled {
    color: rgba(255, 255, 255, .4);
}

::v-deep .van-slider {
    background: #212237;
    height: .4rem;
}

.bottomBtn {
    display: flex;
    justify-content: space-between;
}

.custom-button {
    width: .4rem;
    height: .4rem;
    font-size: 10px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    background-color: #fff;
    border-radius: 100px;
}

.makeScore {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #ba65f5, #27273f);
    padding: .8rem .35rem .2rem;
}

.makeInfo {
    text-align: center;
    color: #fff;

    .scoreTit {
        font-size: .5rem;
        margin-bottom: .8rem;
    }

    .overScore {
        background: rgba(0, 0, 0, .4);
        border-radius: .1rem;
        font-size: .3rem;
        padding: .5rem;
        line-height: .3rem;
        margin-bottom: .4rem;

        .score {
            font-size: .54rem;
        }
    }

    .choseNum {
        font-size: .33rem;
        text-align: left;
        margin-bottom: .4rem;
    }

    .choseTenNum {
        font-size: .4rem;
        display: flex;
        justify-content: space-between;
        width: 70%;
        margin: auto;
        margin-bottom: .4rem;

        .arrow {
            background: rgba(0, 0, 0, .3);
            padding: .15rem;
            font-size: .3rem;
            line-height: .4rem;
            border-radius: .15rem;
            width: .7rem;
            height: .7rem;
        }
    }

    .numList {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: .45rem;
        justify-content: center;
        align-items: center;
        margin-bottom: .4rem;

        .numItem {
            font-size: .3rem;
            width: .8rem;
            height: .8rem;
            margin-bottom: .4rem;
            border-radius: .2rem;
            box-sizing: border-box;
            background: rgba(0, 0, 0, .1);
            padding: .1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
        }
        .isH{
            background-color: rgba(88, 84, 255, 0.48) !important;
            position:relative;
            &::after{
	content: '';
	width: 0.3rem;
	height: 0.3rem;
	position: absolute;
	top: 0;
	right: 0;
	background: url('https://dance-box.oss-cn-shanghai.aliyuncs.com/brand/2023/05/21/1684661348604301.png') center center / 100% 100% no-repeat;
    background-size: 100% 100%;
}
        }
        .choseActive {
            background: rgba(0, 0, 0, .6) !important;
        }

        .numActive {
            background: rgba(0, 0, 0, .2);
        }
    }
}

.shouPlay {
    font-size: .27rem;
    margin-bottom: .3rem;
}

.shouTit {
    text-align: left;
    font-size: .36rem;
    margin-bottom: .6rem;

    .interf {
        font-size: .27rem;
        margin-left: .2rem;
    }
}

.playScoreBox {
    background: #32324e;
    width: 100%;
    border-radius: .2rem;
    padding: .6rem .3rem .6rem;
    margin-bottom: .6rem;
}
</style>